<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://lib.baomitu.com/vue/2.5.1/vue.js"></script>
	<style type="text/css">
		[v-cloak] {
			display: none;
		}
	</style>
</head>
<body>
	
	<div id="app">
		<!-- 使用v-cloak能够解决 插值表达式闪烁问题-->
		<p v-cloak="msg">dsdsd</p>
		<!-- 默认v-text是没有闪烁问题
			会覆盖元素本身中原本的内容，但是插值表达式，只会替换自己的占位符，不会吧整个内容清空-->
		<h4 v-text="msg"></h4>
		<p>{{msg2}}</p>
		<p v-html="msg2">dddd</p>

		<!-- v-bind:是vue中，提供用于绑定属性的指令
			可以写入合法的js表达式，可以简写为：-->
		<input type="button" value="按钮" v-bind:title="mytitle+'444'" v-on:click="show">
		<input type="button" value="按钮" v-bind:title="mytitle+'444'" v-on:mouseover="show">
	</div>

	<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
			data: {
				msg:'欢迎学习Vue',
				msg2:'<h3>dasdasdasdas</h3>',
				mytitle:'这是自己定义的'
			},
			methods:{
				show:function() {
					alert('hello')
				}
			}
		})
	</script>
</body>
</html>